<template>
  <div>Json现场连麦模拟面试</div>
</template>

<script>
import { onMounted } from "vue";

export default {
  components: {},
  setup() {
    const init = () => {
      // Jason老师现场连麦面试

      // 1.如何判断数据和对象
      // 1.1、A instanceof B                       // 存在弊端
      // 1.2、Object.protetype.toString().call()   // 需要加上 .call() 否则 原型链被修改后，判断结果不准确
      // 1.3、A.constructor                        // 存在弊端
      // 1.4、Array.isArray()                      // 无弊端，但是存在浏览器兼容性问题，老浏览器不兼容

      // 1. A instanceof B 原理是：B的prototype属性是否在A的原型链上【不推荐使用】
      let arr01 = [];
      arr01.__proto__ = function () {}; // 去除此行以下打印结果为： true
      // console.log(arr01 instanceof Array); // false

      // 1.2、Object.protetype.toString().call()
      // 添加 .call() 的目的是 防止原型链数据被改写
      let arr02 = [];

      // Object.prototype.toString() = function () {return 123;}
      // Object.prototype.toString(arr02);

      // arr02.__proto__ = function () {} // 改写原型后以下打印结果不受影响
      // console.log(Object.prototype.toString.call(arr02) === '[object Array]'); // true

      let arr03 = [];
      // arr03.constructor = function () {} // 改写原型后以下打印结果为：false
      // console.log(arr03.constructor === Array); // true

      let arr04 = [];
      // console.log(Array.isArray(arr04) === true); // true

      // console.log(arr04);
      // console.log({}); // prototype

      // 多组件（父子组件）中的加载渲染过程是怎么样的？

      // 加载渲染过程
      // 1. 父组件 beforeCreate
      // 2. 父组件 created
      // 3. 父组件 beforeMount
      // 4. 父组件 mounted
      // 5. 子组件 beforeCreate
      // 6. 子组件 created
      // 7. 子组件 beforeMount
      // 8. 子组件 mounted

      // 子组件更新过程：5，6，7，8

      // 父组件更新过程：1，2，3，4

      // 子组件和父组件一起更新过程：1，2，3，5，6，7，8，4

      // 销毁过程：

      // 父子组件一起销毁：
      // 1. 父组件 beforeUpdate
      // 2. 子组件 beforeDestroyed
      // 3. 子组件 Destroyed
      // 4. 父组件 Updated

      // 子组件直接销毁

      // 父组件直接销毁

      // 1. 父组件 beforUpdate
      // 2. 父组件 updated
      // 3. 子组件 beforeUpdate
      // 4. 子组件 updated

      // 子组件和父组件一起更新过程：1，3，4，2

      // vue路由高级问题

      /* 
                解释一下 vueRouter 的完整的导航解析流程是什么

                一次完整的导航解析流程如下：

                导航被触发。
                在失活的组件里调用离开守卫。
                调用全局的 beforeEach 守卫。
                在重用的组件里调用 beforeRouteUpdate 守卫（2.2+）。
                在路由配置里调用 beforeEnter。
                解析异步路由组件。
                在被激活的组件里调用 beforeRouterEnter。
                调用全局的 beforeResolve 守卫（2.5+）。
                导航被确认。
                调用全局的 afterEach 钩子。
                触发 DOM 更新。
                用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数
                
                */

      /*
      技术问题总结：
      1、能简单的说一下盒模型吗？
        W3C盒模型（标准盒模型）
        IE盒模型（怪异盒模型）
      */
    };

    onMounted(() => {
      init();
    });
  },
};
</script>

<style lang="less" scoped></style>